<template>
  <div id="homepage">
    <el-container class="homecontainer">
      <el-header class="homeheader" :class="layoutcolor">
        <HomepageMenu :menuList="menuList"></HomepageMenu>
      </el-header>
      <el-main style="padding: 0px">
        <RouterView name="syshomepage" />
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import router from '@/router';
import { SourceTextModule } from 'vm';
import { ref, reactive, onMounted, getCurrentInstance, watch, computed, watchEffect } from 'vue';
import { AppStore } from '../../stores/store';
import { mapState } from 'pinia';
import HomepageMenu from '@/components/HomePageMenu.vue';
let store = AppStore();
let { proxy }: any = getCurrentInstance();
// 获取模块id
const moduleId = localStorage.getItem('moduleId');
let menuList = reactive([]);

// 获取本地类名 可取vuex中的值
let layoutcolor = ref('skin-blue');

// 监听vuex中的动态类名的变化
watch(
  () => store.layoutcolor,
  (n, o) => {
    // 将获取的新值动态赋给layoutcolor
    layoutcolor.value = n;
  },
  { deep: true, immediate: true }
);
// {

// t图表数据
onMounted(() => {
  getMenuList();
});

// 菜单数据

// 获取菜单树型数据
function getMenuList() {
  // 通过权限信息获取菜单
  menuList.length = 0;
  let moduleMenuMap = store.userInfo.moduleMenuMap;
  if (Object.keys(moduleMenuMap).includes(moduleId)) {
    //menuList.push(...moduleMenuMap[moduleId]);
    const arr = moduleMenuMap[moduleId].filter(p => p.isAssembly === '0' || p.isAssembly === null);
    Object.assign(menuList, arr);
  }
}

// 选中高亮
let indexActive = localStorage.getItem('indexActive');
// 高亮项
let activeIndex = store.activeIndex;

function handleSelect(key: string, keyPath: string[]) {
  // localStorage.setItem('activeIndex', key);
  store.setActiveIndex(key);
}

// 点击跳转
function gotoPage(path, index) {
  // indexActive.value = index;
  localStorage.setItem('indexActive', index);
  proxy.$router.push(path);
  if (path == store.leftRouterUrl) {
  } else {
    store.setLeftActiveIndex('99', '11');
  }
}
</script>
<style lang="scss" scoped>
ul li {
  list-style: none;
}

#homepage {
  .logo {
    height: 47px;
    width: 40px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  width: calc(100%);
  height: calc(100%);
  background-color: $bg-white;

  .homecontainer {
    width: 100%;
    height: 100%;
  }
}

:deep(.el-menu .el-icon) {
  margin-left: 10px;
}

:deep(.el-main) {
  background-color: $bg-gray;
}

// 系统管理界面的顶部菜单栏 去除两侧空白+底部10px
.homeheader {
  padding: 0 !important;
  height: 50px;
}
</style>
